<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03_全屏遮罩</title>
    <style>
        .mask {
            background-color: rgba(0,0,0,.3);
            position: fixed;
            /*left: 0;*/
            /*top: 0;*/
            /*bottom: 0;*/
            /*right: 0;*/
            width: 100vw;
            height: 100vh;
        }
    </style>
</head>
<body>
<div class="mask"></div>
<div class="main">
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam aut commodi dicta ducimus id labore modi
        nihil quam quas quis. Consequuntur dolorum eius esse laborum nemo odio quos repellat tempore.
    </div>
    <div>Ad adipisci asperiores assumenda deleniti dolor dolore ea eligendi enim, eos explicabo facilis ipsa libero
        magni maiores, molestiae quidem similique voluptates voluptatum. Accusantium ad eveniet illum ullam veniam.
        Ipsam, voluptatem.
    </div>
    <div>Corporis cumque dolore ex excepturi expedita impedit laboriosam magni rerum, vel voluptatum? Autem distinctio
        eligendi, eveniet, expedita explicabo facilis illum, libero molestias necessitatibus quasi quia quidem rerum
        saepe similique voluptatibus!
    </div>
    <div>Accusamus aliquam consectetur cumque cupiditate doloremque doloribus enim et fuga illo necessitatibus, officia
        praesentium provident quae quaerat quibusdam repudiandae tempore ullam unde, veniam vero. Dolore illo nam nihil
        nisi perspiciatis.
    </div>
    <div>Atque delectus nisi tempore! Aliquid architecto commodi consequatur cumque doloremque dolorum earum eos
        excepturi, exercitationem id illum ipsa iste laudantium maxime nesciunt obcaecati provident recusandae,
        reprehenderit saepe sed tenetur voluptates?
    </div>
    <div>Dolore esse, excepturi id illo itaque labore laborum optio possimus quae, reiciendis vero vitae! Alias
        architecto aut beatae commodi cum dolor dolore inventore iusto molestias, officiis quam rerum saepe, vel?
    </div>
    <div>Consequatur dicta dolores fuga harum nemo possimus ullam voluptates. Aliquid corporis, cum, debitis dolore
        ducimus eligendi enim et illo inventore nihil odio reiciendis rem tempora temporibus ut veniam vero. Asperiores!
    </div>
    <div>Ad adipisci deleniti dicta est fugiat fugit libero minus obcaecati pariatur, quis rem sapiente tempore vero.
        Amet animi cum distinctio enim error et labore numquam quo, sapiente soluta sunt ullam?
    </div>
    <div>Consequatur dolore dolorum, ducimus inventore odio officia placeat rerum tempore! Accusamus amet beatae
        consectetur dolore explicabo illum ipsum porro qui quia tenetur? Accusantium aspernatur doloribus fuga id nemo
        tempora voluptatum.
    </div>
    <div>Aperiam atque debitis eos, nam nemo praesentium quis quo, quod, quos ratione recusandae totam voluptatem! At
        eaque eveniet expedita illo ipsam laborum magnam nam natus nobis, officia optio quisquam voluptatem?
    </div>
    <div>A architecto atque autem dolorum fuga hic in, minus officia quae quidem quis repellendus reprehenderit? Aperiam
        corporis ducimus fuga illo iste odit quae quasi sit tempore voluptatum. Et, quia, vel.
    </div>
    <div>Amet architecto dicta dolor laudantium natus nesciunt nisi, odit omnis recusandae repellat repellendus,
        sapiente sit suscipit tempore ullam unde voluptatum? A eaque laboriosam nulla provident! Alias dolores enim
        laborum necessitatibus!
    </div>
    <div>Accusantium aspernatur cum ea, enim esse eveniet, ipsam maxime nemo quaerat quos tenetur veritatis voluptates!
        Eum in odio provident quidem vel. Beatae deleniti ducimus eos ex fugit non quae quam.
    </div>
    <div>Alias dolor ducimus earum esse, id, iste magnam molestiae nulla odio perspiciatis, porro quibusdam quos
        similique. Exercitationem explicabo in molestiae nemo neque quo voluptate! Consequuntur expedita facilis minus
        totam voluptatibus.
    </div>
    <div>Consectetur dolorem explicabo officiis quasi rem soluta tenetur vel. Accusantium doloremque dolorum fugit illum
        nemo nisi non officiis omnis repellendus sit! Animi beatae earum eligendi eveniet id vero voluptatem voluptatum?
    </div>
    <div>Aspernatur aut expedita facilis incidunt laborum laudantium quibusdam, rerum. Autem commodi consequuntur
        delectus dicta dolores ducimus excepturi fugit, impedit neque, nihil perferendis perspiciatis placeat, quaerat
        soluta totam! Magni, ullam voluptatem.
    </div>
    <div>Accusamus ad aperiam at consequatur deleniti dignissimos eos illum inventore laborum libero magni maxime, minus
        nam nesciunt nostrum nulla odit officiis placeat quas quis quo sapiente sint ut velit veritatis?
    </div>
    <div>Accusamus alias assumenda at aut consectetur cumque, cupiditate ducimus et eum explicabo facilis minus
        molestiae nemo officia quisquam quo reiciendis rem repellat reprehenderit similique sint suscipit ut velit
        veniam voluptate.
    </div>
    <div>Eum expedita illo numquam pariatur quis repellat ullam. Accusantium ad amet consequatur cumque debitis eius in
        ipsum laboriosam magni maiores necessitatibus neque odio officia, provident quaerat quibusdam ratione
        reprehenderit sed!
    </div>
    <div>Ab consectetur culpa deserunt, facere illo optio qui quidem recusandae tempora velit! Fugit, iste, voluptas! A
        alias asperiores, aut dolorum earum ex explicabo facilis nam, nulla quisquam repellat repudiandae ut.
    </div>
    <div>Aspernatur deleniti illo inventore magni maiores sequi sit tempore totam unde velit! Assumenda culpa cum eius
        iure officiis, quibusdam sequi. Ipsum minus, pariatur! Asperiores blanditiis doloribus error porro sed veniam.
    </div>
    <div>Eum in laboriosam libero quo? Accusamus aliquid illo laborum neque numquam praesentium quis, tempore. A aliquam
        esse exercitationem explicabo id, illum ipsum libero omnis quae quis repellendus suscipit veniam voluptatum.
    </div>
    <div>Aperiam, consequuntur, doloribus dolorum eius impedit itaque neque perferendis ratione, reiciendis unde vel
        voluptatum. Aspernatur culpa enim expedita facere labore laboriosam magnam nam, natus, nemo obcaecati odit
        quaerat quo voluptatibus?
    </div>
    <div>Adipisci alias aliquid architecto autem, consequatur culpa cum cupiditate delectus dolorem ducimus excepturi
        exercitationem harum, impedit inventore iure nesciunt nihil nulla omnis quos sed similique tenetur, totam vero
        voluptate voluptates?
    </div>
    <div>Consequuntur deserunt eum inventore laudantium magnam numquam pariatur rem tenetur? Corporis deleniti, dolorem
        doloremque, et eum, in ipsa iure odit praesentium provident quas quia quibusdam quod tempore vel. Deleniti,
        perspiciatis.
    </div>
    <div>Blanditiis commodi culpa debitis deleniti dolorem et, fugit impedit ipsam iure nam nemo neque, omnis possimus
        quia tenetur voluptas voluptatum. Assumenda esse ipsam labore nulla omnis provident reiciendis repudiandae
        sapiente!
    </div>
    <div>Accusamus ad, adipisci aliquid aperiam at atque deleniti deserunt dolorum exercitationem, facere fuga hic
        itaque minus nisi non officia omnis quaerat rem reprehenderit repudiandae suscipit tempore vitae voluptatum!
        Aliquam, eveniet!
    </div>
    <div>Aliquid asperiores, at commodi cumque cupiditate eos et excepturi explicabo fugiat harum maxime minus modi nam
        neque nihil, officia omnis optio quia quisquam recusandae rem suscipit ut? Excepturi, in, tempore.
    </div>
    <div>Asperiores error ipsa necessitatibus praesentium quam repudiandae similique ut vel voluptas? Architecto,
        consequuntur distinctio dolor eaque laboriosam libero magni natus, neque optio pariatur quaerat sapiente tempora
        ullam unde voluptate voluptates!
    </div>
    <div>Ab adipisci animi at beatae culpa dicta dignissimos distinctio ea enim eos excepturi fugit incidunt laudantium
        maiores nam numquam odio pariatur, provident quidem quis quo quos ratione similique tempore vel?
    </div>
    <div>Ab accusamus cupiditate, dignissimos doloremque dolorum, ea earum in inventore laborum numquam odit
        perspiciatis quas, quia reiciendis saepe sint totam vel. Cum dicta esse fuga harum quae quod suscipit veniam.
    </div>
    <div>Eligendi excepturi harum id minus nemo nostrum odio quia sed! Dolorum in perspiciatis qui rerum voluptas.
        Corporis cum ea eius facere facilis ipsa itaque minima nemo perspiciatis reprehenderit sint, soluta!
    </div>
    <div>A expedita facere magnam, nihil obcaecati optio quisquam rem velit voluptas voluptatem. Ducimus est pariatur
        quod repellendus sed. Alias autem et molestias natus perferendis porro quibusdam quidem quos rem? Sit!
    </div>
    <div>A adipisci aperiam autem, cupiditate dolorem dolores doloribus eius enim eos eveniet expedita fuga impedit
        laboriosam laudantium magnam necessitatibus numquam praesentium qui, quidem quis recusandae reiciendis
        repellendus sapiente, tempore ut.
    </div>
    <div>Assumenda at commodi earum error eum expedita facilis molestias nam odit officiis, quibusdam ratione,
        voluptatem voluptates! Aliquid beatae eligendi excepturi hic illum itaque natus nobis numquam reiciendis
        voluptates. Repudiandae, sed.
    </div>
    <div>Cum dicta fugit, molestiae perferendis quaerat quas sunt. Accusantium alias aliquam assumenda commodi dolore
        eum eveniet fuga maxime modi nisi odio rerum saepe sequi, sit soluta sunt totam ullam voluptate.
    </div>
    <div>Ab architecto cupiditate doloribus magnam officia praesentium temporibus unde velit veniam veritatis!
        Aspernatur at, dolor doloribus ducimus error ipsam magni, maxime nam necessitatibus nisi obcaecati quo similique
        tempora vel vero.
    </div>
    <div>Facere maiores nostrum possimus. Ab accusantium aliquid animi assumenda autem consequatur eligendi, error illo
        incidunt inventore iste maxime minima obcaecati possimus quia quisquam reiciendis voluptates. Dicta dolore
        placeat quod sed?
    </div>
    <div>Amet esse, eum modi nisi omnis perferendis quo! Amet assumenda corporis culpa delectus eius eos exercitationem,
        harum incidunt, iusto laboriosam natus nemo quaerat quis, quod reiciendis rem reprehenderit tenetur veniam!
    </div>
    <div>Aspernatur, blanditiis, cumque dicta distinctio doloremque id ipsa labore minima minus molestias natus numquam
        officiis porro praesentium qui quo quod rem soluta, sunt tempora. Blanditiis eveniet incidunt quo ratione
        sapiente!
    </div>
    <div>Aliquid exercitationem impedit nesciunt odit optio quaerat quia rem repudiandae? Aspernatur beatae dicta
        dolorem et exercitationem ipsa ipsam iure iusto, laudantium nam obcaecati officiis reprehenderit similique
        suscipit vero voluptatem voluptates!
    </div>
    <div>Aliquid asperiores atque commodi culpa dignissimos distinctio non provident sint sit voluptatem. Assumenda
        commodi eum expedita quasi sequi? Dolorum et ex reprehenderit. A assumenda exercitationem ipsum nam neque sunt
        tempora.
    </div>
    <div>Alias cum debitis doloremque ex excepturi fugiat impedit iusto magni maiores molestias nemo nihil optio porro
        quae quia quibusdam quidem repellat similique, tempora voluptatum. Aliquam laboriosam magnam quibusdam
        repudiandae sit?
    </div>
    <div>Eius eligendi illum ipsa ipsam necessitatibus nesciunt provident voluptates? Accusamus ad at beatae consectetur
        cum debitis deleniti expedita ipsam iusto labore magnam molestias, natus, nostrum obcaecati, perferendis quae
        quisquam rerum!
    </div>
    <div>Accusantium autem blanditiis, culpa cum delectus dolorum ducimus esse est expedita explicabo id iste labore
        laborum necessitatibus omnis optio provident quas, quasi reiciendis reprehenderit sed tempore velit veniam vero
        voluptate.
    </div>
    <div>Alias architecto delectus deserunt dignissimos fuga ipsa ipsam nisi quia suscipit velit. Accusamus consequuntur
        eius eos error facere illum itaque labore laboriosam maiores minima, molestiae possimus quibusdam rerum
        similique voluptate!
    </div>
    <div>Ad cum maxime odio odit placeat porro rerum voluptatem? Architecto beatae culpa dignissimos, dolorum illo ipsam
        itaque modi natus nulla quaerat sed sunt suscipit tempora ut velit veniam voluptate voluptatum!
    </div>
    <div>Architecto assumenda beatae deleniti ea eius esse pariatur temporibus voluptates. Enim nesciunt nostrum sint ut
        voluptas. Accusamus aliquid consequatur, excepturi fuga laborum necessitatibus qui quibusdam quidem tempora ut
        vitae voluptatum.
    </div>
    <div>Aliquid amet animi atque cumque distinctio eaque hic id, labore laboriosam minima mollitia nam possimus
        sapiente sunt suscipit? Autem culpa dicta ipsam labore provident? Fugiat maxime sapiente tenetur velit! Quae?
    </div>
    <div>Ab aliquid aperiam assumenda blanditiis delectus enim eos est, eum ex explicabo facere fugiat itaque iusto
        labore laudantium, maiores maxime nihil omnis quae quaerat quam quidem repudiandae sed, sint sit.
    </div>
    <div>Amet aspernatur autem consequuntur, cupiditate deserunt doloremque error et eveniet explicabo impedit inventore
        itaque natus non nulla optio quos sapiente ullam ut. Eveniet iste laboriosam natus porro soluta voluptatem
        voluptates!
    </div>
    <div>Labore quibusdam quis soluta! Ad, adipisci corporis inventore maiores numquam quidem unde vel voluptatem!
        Asperiores cum distinctio dolor et expedita, impedit labore libero magnam nesciunt odio perspiciatis possimus
        veniam vitae?
    </div>
    <div>A ab aperiam architecto aspernatur aut culpa distinctio eaque harum id laborum laudantium molestias nam nemo,
        neque odio perspiciatis possimus provident quisquam repudiandae tempora tempore ut vitae voluptatibus! A,
        fugiat?
    </div>
    <div>Accusantium eius esse ipsa odit perspiciatis provident, sint. A culpa dolorem expedita, explicabo hic magnam
        maxime modi nisi, numquam officia optio praesentium recusandae reiciendis saepe sunt suscipit ullam vel
        voluptatem.
    </div>
    <div>A ad alias architecto consequatur distinctio ex excepturi exercitationem hic id, labore magni nisi officiis,
        omnis pariatur provident quaerat quidem sit sunt suscipit veritatis? Asperiores assumenda eum fugit mollitia
        saepe.
    </div>
    <div>Alias, animi dignissimos dolores ea fuga ipsum iure libero magni obcaecati omnis, provident quaerat saepe sit
        sunt totam ullam vitae voluptas? Atque consectetur dolorem eum illo officiis ratione rerum vitae.
    </div>
    <div>Asperiores cumque dignissimos dolor enim et exercitationem hic, quaerat quas qui rerum sapiente ullam,
        voluptatum. Ad aspernatur dolorem doloribus et illo molestias, placeat quod ratione rerum vel vero voluptas
        voluptate.
    </div>
    <div>Animi architecto beatae dolorum iste non provident quod velit veniam! A amet aperiam autem dolor dolore dolores
        doloribus ea eius error expedita laudantium, nihil nisi numquam obcaecati possimus quisquam, voluptatum.
    </div>
    <div>Dicta dolorem officiis vero. Aliquid deleniti dignissimos eligendi eveniet excepturi facilis minus molestiae
        nam neque nesciunt, nobis numquam officia pariatur porro praesentium, quae quisquam rerum vitae. Doloremque
        minima repellendus tempore?
    </div>
    <div>Ab accusantium ad adipisci aliquid architecto asperiores blanditiis consequuntur delectus dicta dolor doloribus
        error, harum in inventore neque nihil optio perferendis porro quae, quas quidem suscipit tenetur totam voluptas
        voluptatem.
    </div>
</div>
</body>
</html>